<template>
    <h3>组件生命周期函数应用</h3>
    <p ref="name">百战程序员</p>
    <ul>
        <li v-for="(item, index) of banner" :key="index">
            <h3>{{ item.title }}</h3>
            <p>{{ item.content }}</p>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            banner: []
        }
    },
    created() {
      
    },
    beforeMount() {
        console.log(this.$refs.name); //undefined
    },
    mounted() {
        console.log(this.$refs.name);
          //模拟网络请求
          this.banner = [
            {
                "title": "我在爱尔兰",
                "content": "安尔兰 安尔兰语"
            },
            {
                "title": "一个人在东京",
                "content": "东京是小日本的首都"
            },
            {
                "title": "相约夏威夷之夏",
                "content": "威夷之夏"
            }
        ]
    }
}
</script>